<template>
    <IndependencePannel :title="title" ref="independencePannel">
        <page-region
            v-for="(item, index) in independencePageFrame"
            :key="index"
            :page-region-data="independencePageData[getKey(item, index)]"
            :page-region-frame="item"
        >
            <template v-for="(index, name) in $scopedSlots" #[name]="pageRegionData">
                <slot :name="name" v-bind="pageRegionData"></slot>
            </template>
        </page-region>
    </IndependencePannel>
</template>
<script>
import PageRegion from './PageRegion.vue'
import IndependencePannel from '@/components/IndependencePannel/index.vue'
const SAVE_SUCCESS = 'saveSuccess'
export default {
    components: {
        IndependencePannel,
        PageRegion
    },
    props: {
        title: String,
        independencePageFrame: {
            type: Array,
            default: () => []
        },
        independencePageData: {
            type: Object,
            default: () => ({})
        }
    },
    emits: [SAVE_SUCCESS],
    methods: {
        goBack() {
            this.$refs.independencePannel.goBack()
        },
        getKey(item, index) {
            return item.key || `region${index}`
        }
    },
    created() {
        this.independencePageFrame
            .filter((v) => v.key && !this.independencePageData.hasOwnProperty(v.key))
            .forEach((element, index) => {
                this.$set(this.independencePageData, this.getKey(element, index), {})
            })
    }
}
</script>
